<template>
    <div>
        <cu-navbar :is-back="false">
            <block slot="content">登录</block>
        </cu-navbar>
        <view class="login-home">
            <view class="bg-white" style="height: 100%;">
                <div>
                    <p class="tips">
                        欢迎登录
                    </p>
                    <view class="desc">
                        <text>没有账号？</text>
                        <text @click="registers">立即注册</text>
                    </view>
                </div>
                <view class="content">
                    <view class="phone">
                        <u-input autocomplete="off" v-model="mobile" height="84" :customStyle="{fontSize:'28rpx'}"
                                 maxlength='11' type="number" :placeholder-style="placeholderStyle" placeholder="请输入手机号"
                                 @blur="hushcode" />
                    </view>
                    <view class="password">
                        <u-input autocomplete="off" v-model="captcha" height="84" type="password"
                                 :customStyle="{fontSize:'28rpx'}" :placeholder-style="placeholderStyle" placeholder="请输入密码" />
                    </view>
                    <text class="submit" @click="submit">登录</text>

                    <!-- #ifdef  H5 -->
                    <!-- <a class="downLoad" style="text-decoration: none;" href="http://www.mvnhdx.com/gongxifacai.apk">下载APP</a> -->
                    <!-- #endif -->
                </view>

                <div class="f-r a-c j-b tips-box">
                    <span></span>
                    <text class='getCode shadow' @click="jump('/pages/login/wangjimima')">忘记密码?</text>
                </div>
            </view>

            <!-- 更新弹框 -->
            <u-popup v-model="show" mode="center">
                <view class="box_popup">
                    <view>版本更新</view>
                    <view>检测到有新版本，点击确定下载新版本</view>
                    <view class="btn">
                        <view class="cancel" @click="show = false">取消</view>
                        <view class="ok" @click="uploadApp">确定</view>
                    </view>
                </view>
            </u-popup>


        </view>
    </div>
</template>

<script>
	import {
		DOWNLOAD_URL,
		API_URL,
		API_URL2
	} from "../../env.js";
	export default {
		computed: {
			logo() {
				return this.vuex_config.logo || "";
			},
		},
		onLoad() {
			// console.log('load')
			uni.showLoading({
				title: "加载中...",
			});
			this.mobile = uni.getStorageSync("username") ?
				uni.getStorageSync("username") :
				"";
			this.captcha = uni.getStorageSync("password") ?
				uni.getStorageSync("password") :
				"";
			this.hsh = "";
			// console.log(new Date().getTime())
			/* this.timeData = new Date().getTime()
			this.API_URL = API_URL+'api/user/arithmeticCode?mobile='+this.timeData */
			uni.hideLoading();
		},
		data() {
			return {
				placeholderStyle: "color: #999;font-size: 28upx;",
				wx_user_id: 0,
				mobile: "13957422877",
				hsh: "",
				bgh: "",
				captcha: "KEfan520",
				state: false, //是否开启倒计时
				totalTime: 60, //总时间，单位秒
				recordingTime: 0, //记录时间变量
				currentTime: 0, //显示时间变量
				show: false,
				API_URL: '',
				timeData: "",
				code: "",
				show3: false
			};
		},
		methods: {
			registers() {
				this.$common.redirectTo(this.$ph.register);
			},
			jump(path) {
				uni.navigateTo({
					url: path,
				});
			},
      copy() {
        uni.setClipboardData({
          //去找上面的数据
          data: 'https://apps.xfenfa.cn/Eesm',
          success: function (res) {
            uni.showToast({
              title: "复制成功",
            });
          },
          fail: function (res) {
            console.log(res);
          },
        });
      },
			hushcode() {
				console.log('00000')
				if (!this.mobile) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none',
						duration: 3000
					})
					return false;
				}
				this.API_URL = API_URL2 + 'api/user/arithmeticCode?mobile=' + this.mobile + '.' + new Date().getTime()
			},
			submit() {
				if (!this.$common.isPhoneNumber(this.mobile)) {
					this.$common.errorToShow("手机号码格式错误！");
					return;
				}
				if (this.captcha == "") {
					this.$common.errorToShow("请输入密码！");
					return;
				}
				this.$api
						.login({
							username: this.mobile,
							password: this.captcha,
						})
						.then((res) => {
              console.log(res.code)
              if (res.code == 1) {
								uni.setStorageSync("userinfo", res.result);
								uni.setStorageSync("username", this.mobile);
								uni.setStorageSync("password", this.captcha);
								uni.setStorageSync("code", this.hsh);
								uni.setStorageSync("token", res.result.token);
								uni.setStorageSync("address", res.result.address);
                this.$api.isValidAddressAndPay().then(res2 => {
                  console.log(res2.code)
                  if (res2.code == 1) {
                    console.log(res2.reason)
                    uni.setStorageSync('statusObj', res2.reason)
                    uni.switchTab({
                      url:'/pages/home/home'
                    })
                  }
                })
							}
						});

			},

			uploadApp() {
				plus.runtime.openURL(`${DOWNLOAD_URL}gongxifacai.apk`);
			},
		},
	};
</script>

<style lang="scss">
	.login-home {
		padding: 10vw;
	}
	page {
		height: calc(100vh - 0px);
		background-color: #fff;
	}
.tips {
	font-size: 24px;
	font-weight: 500;
	color: #333;
	padding-top: 40rpx;
}

		.desc {
			margin-top: 12px;
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 30rpx;
			padding-bottom: 10vw;
			text {
				font-size: 15px;
				color: #888;
			}

			text:last-child {
				color: rgb(21, 97, 252);
			}
		}

	.top {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding-top: 120rpx;

		image {
			width: 140upx;
			height: 140upx;
			margin: 60rpx auto;
		}
	}
	.tips-box {
			margin: 40rpx 0;
			text-align: right;
			font-size: 13px;
			font-weight: 400;
			color: #888;
	}
	.content {
		display: flex;
		flex-direction: column;

		.downLoad {
			margin: auto;
			margin-top: 42upx;
			font-size: 32upx;
			color: #6123cc;
		}

		.submit {

			height: 84upx;
			background: rgb(255, 68, 59);
			border-radius: 16upx;
			font-size: 32upx;
			font-weight: bold;
			color: #fff;
			text-align: center;
			line-height: 84upx;
			margin: 50rpx 0rpx 0;
		}

		view {
			display: flex;
			flex-direction: row;
			align-items: center;

			image {
				margin-right: 40upx;
			}

			.u-input {
				font-size: 28rpx;
				// border-bottom: 1upx solid #e6e6e6;
			}
		}

		.hsh {
			border-bottom: 2upx solid #eee;

			.code_img {
				width: 300rpx;
				height: 80rpx;
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}
		}

		.phone {
			    background: #f3f3f3;
			    border-radius: 4px;
				margin-bottom: 20rpx;
				height: 96rpx;
				.u-border {
					border: none !important;
				}
		}

		.password {
			background: #f3f3f3;
			border-radius: 4px;
			height: 96rpx;
			.u-border {
				border: none !important;
			}

			.getCode,
			.daoTime {
				margin-left: 20rpx;
				background-color: rgb(255, 68, 59);
				height: 40rpx;
				color: #fff;
				font-size: 24rpx;
				border-radius: 20rpx;
				line-height: 40rpx;
				text-align: center;
				width: 140rpx;
			}

			.u-input {
				border: none;
			}
		}
	}

	/* #ifdef MP-WEIXIN */
	page {
		height: calc(100vh - 0px);
	}

	.login-home {
		height: 90.8%;
	}

	/* #endif */
	/* #ifndef MP-WEIXIN */
	page {
		height: calc(100vh - 0px);
	}

	.login-home {
		height: 93.8%;
	}

	/* #endif */

	.box_popup {
		width: 662upx;
		text-align: center;

		& view:nth-child(1) {
			margin-top: 32upx;
			color: #333;
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: 500;
		}

		& view:nth-child(2) {
			margin-top: 38upx;
			font-size: 28upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #fea845;
		}

		.btn {
			display: flex;


			view {
				width: 50%;
				border-top: 2upx solid #e6e6e6;
				opacity: 1;
				text-align: center;
				line-height: 100upx;
			}

			.cancel {
				border-right: 2upx solid #e6e6e6;
				color: #999999;
				font-size: 36upx;
				font-family: PingFang SC;
				font-weight: 500;
			}

			.ok {
				color: #007aff;
				margin-top: 32upx;
				font-size: 36upx;
				font-family: PingFang SC;
				font-weight: 500;
			}
		}
	}
</style>
